import React, { Component } from 'react';
import './Allmv.scss';
import { Pagination } from 'antd';

class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
          mvlist: []
      }
      this.itemRender = this.itemRender.bind();
    }
    itemRender(current, type, originalElement) {
        if (type === 'prev') {
          return <span>上一页</span>;
        } if (type === 'next') {
          return <span>下一页</span>;
        }
        return originalElement;
      }

      
    componentDidMount  () {
        fetch('https://api.bzqll.com/music/tencent/hotMvList?key=579621905&year=0&tag=0&area=0&limit=20&offset=0')
            .then(res => res.json())
            .then(data => {
                console.log(data)
                this.setState({
                    mvlist: data.data
                })
            })

            // name singer  url publictime playCount
    }
    render () {
        return (
            <div className="allmv">
                <div className="mvtitle">
                    <h1>全部MV</h1>
                    <span className="active">最热</span>
                    <span>最新</span>
                </div>
                <ul className="mv-content">

                    {
                        this.state.mvlist.map((item, index) => {
                            return (
                            <li key={index}>
                                <div className="tu"><img src={item.pic} alt={item.pic}/></div>
                                <p className="songname">{item.name}</p>
                                <p className="singer">{item.singer}</p>
                                <p className="play">{item.playCount}次<span className="time">{item.publictime}</span></p>
                            </li>
                            )
                        })
                    }

                </ul>
                <Pagination total={500} itemRender={this.itemRender} /> 
            </div>
        )
    }
}  

export default Com;